
import React, { useState, useEffect } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";

export default (props) => {

    const { name, age, sex, level, lineView } = props;
    const [levelup, setlevel] = useState(false);
    const arr = ['AAAAA', 'BBBBBB', 'CCCCCCC', 'DDDDDD'];

  

    useEffect(() => {
        setTimeout(() => {
            setlevel(true)
        }, 2000)
    }, [])

    // const getLevelView = () => {
    //     return (
    //         levelup ?
    //             <Text style={style.txt}>
    //                 {`等级：高级`}
    //             </Text> :
    //             <Text style={style.txt}>
    //                 {`等级：低级`}
    //             </Text>
    //     );
    // }

    //简化写法
    // const getLevelView = () => (
    //     levelup ?
    //         <Text style={style.txt}>
    //             {`等级：高级`}
    //         </Text> :
    //         <Text style={style.txt}>
    //             {`等级：低级`}
    //         </Text>
    // );

    //当只有时true时显示
    const getLevelView = () => (
        levelup &&
        <Text style={style.txt}>
            {`等级：高级`}
        </Text>

    );

    const getlistView2 = () => {
        const listView = [];
        for (let i = 0; i < 5; i++) {
            listView.push(<Text style={style.txt}>{`item${i + 1}`}</Text>)
        }
        return listView;
    }

    const style = StyleSheet.create({

        topView: {
            width: '100%',
            flexDirection: 'column',
            height: "auto",
            // backgroundColor:'yellow',

        },
        txt: {
            fontSize: 20,
            color: 'black',
            marginTop: 10,

        },
        txtBold: {
            fontWeight: 'bold',
        }
    });

    return (
        <View style={style.topView}>

            <Text style={[style.txt, style.txtBold]}>
                {`姓名：${name}`}
            </Text>
            <Text style={style.txt}>
                {`年龄：${age}`}
            </Text>
            <Text style={style.txt}>
                {`性别：${sex}`}
            </Text>
            {getLevelView()}
            {lineView}

            <ScrollView>
                {
                    // arr.map((item) => {
                    //     return (
                    //         <Text style={style.txt}>{item}</Text>
                    //     );
                    // })

                    //简写
                    // arr.map(item => <Text style={style.txt}>{item}</Text>)

                    getlistView2()
                }
            </ScrollView>


        </View>
    );


};